<template>
    <div>
        <el-upload class="upload-demo" :on-success="handleSuccess" :on-error="handleError" :limit="1" action="string"
            :http-request="handleUpload" drag>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">注：组合名为文件名，若有重名则会标号</div>
        </el-upload>
    </div>
</template>

<script>
import {upload} from "@/api/upload"
export default {
    name: 'HelloWorld',
    props: {
        msg: String
    },
    data() {
        return {

        }
    },
    created() {

    },
    methods: {
        handleSuccess() {
            this.$confirm('上传成功，是否进行数据分析？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {


            }).catch(() => {
                // this.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });
            });

        },
        handleError() {
            this.$confirm('上传失败，原因：xxxx', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {


            }).catch(() => {
                // this.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });
            });

        },
        handleUpload(file){
            debugger;
            let formData = new FormData();
            formData.append("file", file.file);
            upload(formData).then(()=>{
                console.log("handleUpload success")
            })
        }

    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.upload-demo {
    margin: 0 auto;
    width: 360px;

    .el-upload__tip {
        margin: 0 auto;
        width: 240px;

    }
}
</style>